import React, {Component} from 'react';


class Box extends Component {
    render() {
        return  <div style={{border: +this.props.item === this.props.index ? "1px solid red" : "1px solid black",
                height: "100px", width: "100px"}}>
        </div>
    }

    componentWillUpdate(nextProps, nextState, nextContext) {
        console.log(111111);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(22222);
    }

    componentWillReceiveProps(nextProps, nextContext) {
        console.log(33333);
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        // 这样做只渲染2次 1次旧的div 1次新的div   componentWillUpdate render componentDidUpdate都只执行2次  componentWillReceiveProps每次都会执行
        return +this.props.item === this.props.index || +nextProps.item === nextProps.index;
    }
}

class App extends Component {
    state = {
        list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
        currentIndex: 0,
    }
    render() {
        return (<div>
            <input style={{marginBottom: "10px"}} onChange={event => this.setState({currentIndex: event.target.value})}/>
            <div style={{display: "flex", height: "220px", justifyContent: "space-between", flexWrap: "wrap", alignItems: "center"}}>
                {this.state.list.map((item, i) => {
                    return <Box key={item} index={i} item={this.state.currentIndex} />
                })}
            </div>
        </div>);
    }
}

export default App;